<template>
  <div class="timer" :class="{ 'time-rotate': model === 'TIME' }">
    <div>
      <div class="timer-left">
        <span class="hour">{{ hour }}:{{ minute }}</span>
        <span class="second" v-if='config.isShowSecond'>{{ second }}</span>
      </div>
      <div class="timer-right">
        <div class="week">星期{{ week }}</div>
        <div class="date">{{ date }}</div>
      </div>
    </div>
    <div v-if="model === 'TIME' && config.isShowWeather" class="weather">
      <div class="inline wea-left">
        <div><i class='wea-icon' :class="wea_img( weather.wea_img )"></i></div>
        <div class='tem-wrap'>
          <span class='tem'>{{ weather.tem }}</span>
          <span class="inline">
            <div>℃</div>
            <div>{{ weather.wea }}</div>
          </span>
          </div>
      </div>
      <div class="inline wea-right">
        <div>{{ weather.city }}：{{ weather.tem_night }}℃~{{ weather.tem_day }}℃</div>
        <div >{{ weather.win }}&nbsp;&nbsp;{{ weather.win_speed }}&nbsp;&nbsp;{{ weather.win_meter }}</div>
        <div>空气质量：{{ weather.air }}&nbsp;&nbsp;{{ air( weather.air ) }}</div>
        <div >更新时间：{{ weather.update_time }}</div>
      </div>
    </div>
    <div v-if="model !== 'TIME' && config.isShowWeather" class="wea-mini">
      <span>{{ weather.city }}</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <span>{{ weather.wea }}</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <span>{{ weather.tem_night }}℃~{{ weather.tem_day }}℃</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <span>{{ weather.win }}&nbsp;{{ weather.win_speed }}</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <span>空气质量:{{ weather.air }}</span>
    </div>
  </div>
</template>
<script>

export default {
  props: ["model","weather",'config'],
  data() {
    return {
      timer: null,
      date: "",
      week: "",
      hour: "",
      minute: "",
      second: ""
    };
  },
  created() {
    this.getDate();
    this.init();
  },
  methods: {
    init() {
      this.timer = setInterval(this.getDate, 1000);
    },
    getDate() {
      const date = new Date();
      const [hour, minute, second] = date
        .toTimeString()
        .split(" ")[0]
        .split(":");
      this.week = "日一二三四五六"[date.getDay()];
      this.date = date.toLocaleDateString().replace(/\//g, "-");
      this.hour = hour;
      this.minute = minute;
      this.second = second;
      // 判断是否需要更新天气
      // 1.缓存是否存在
      // 2.是否到时间
    },
    wea_img( weather ){
      /* 晴天四种阶段 [ 好复杂，放弃治疗,采用简单模式 ]
      * 日出
      * 白天
      * 日落
      * 黑夜
      * 月落
      */
      const weathers = {
        yu: 'heavy-rain',
        wu: 'partly-cloudy',
        xue: 'light-rain', // el没有雪，这里用小雨代替
        lei: 'lightning',
        yun: 'cloudy',
        yin: 'partly-cloudy',
        qing: 'sunny',
        shachen: 'cloudy',
        bingbao: 'heavy-rain',
      }
      return `el-icon-${ weathers[ weather ] }`
    },
    air( air ){
// 根据《环境空气质量指32313133353236313431303231363533e58685e5aeb931333335323964数（AQI）技术规定（试行）》（HJ 633—2012）规定：
// 空气污染指数划分为0－50、51－100、101－150、151－200、201－300和大于300六档，对应于空气质量的六个级别，指数越大，级别越高，说明污染越严重，对人体健康的影响也越明显。[1]
// 空气污染指数为0－50，空气质量级别为一级，空气质量状况属于优。此时，空气质量令人满意，基本无空气污染，各类人群可正常活动。[1]
// 空气污染指数为51－100，空气质量级别为二级，空气质量状况属于良。此时空气质量可接受，但某些污染物可能对极少数异常敏感人群健康有较弱影响，建议极少数异常敏感人群应减少户外活动。[1]
// 空气污染指数为101－150，空气质量级别为三级，空气质量状况属于轻度污染。此时，易感人群症状有轻度加剧，健康人群出现刺激症状。建议儿童、老年人及心脏病、呼吸系统疾病患者应减少长时间、高强度的户外锻炼。[1]
// 空气污染指数为151－200，空气质量级别为四级，空气质量状况属于中度污染。此时，进一步加剧易感人群症状，可能对健康人群心脏、呼吸系统有影响，建议疾病患者避免长时间、高强度的户外锻练，一般人群适量减少户外运动。[1]
// 空气污染指数为201－300，空气质量级别为五级，空气质量状况属于重度污染。此时，心脏病和肺病患者症状显著加剧，运动耐受力降低，健康人群普遍出现症状，建议儿童、老年人和心脏病、肺病患者应停留在室内，停止户外运动，一般人群减少户外运动。[1]
// 空气污染指数大于300，空气质量级别为六级，空气质量状况属于严重污染。此时，健康人群运动耐受力降低，有明显强烈症状，提前出现某些疾病，建议儿童、老年人和病人应当留在室内，避免体力消耗，一般人群应避免户外活动。[1]
      if( air <= 50 ){
        return '优'
      }else if( air > 50 && air <= 100 ){
        return '良'
      }else if( air > 100 && air <= 150 ){
        return '轻度'
      }else if( air > 150 && air <= 200 ){
        return '中度'
      }else if( air > 200 && air <= 300 ){
        return '重度'
      }else if( air > 300 ){
        return '严重'
      }
    }
  },
  destoryed() {
    clearInterval(this.timer);
  }
};
</script>
<style lang="scss" scoped>
.timer {
  margin-left: -25px;
  padding: 50px 0;
  text-align: center;
  &-left {
    display: inline-block;
    width: 400px;
  }
  &-right {
    display: inline-block;
  }
}
.hour {
  font-size: 112px;
  margin-right: 7px;
  letter-spacing: 1px;
}
.second {
  font-size: 60px;
  line-height: 112px;
}
.date {
  font-size: 32px;
  letter-spacing: 1px;
}
.week {
  height: 64px;
  font-size: 42px;
}
.time-rotate {
  .timer {
    &-left {
      width: 500px;
    }
  }
  .hour {
    font-size: 140px;
    margin-right: 9px;
    letter-spacing: 1px;
  }
  .second {
    font-size: 75px;
    line-height: 140px;
  }
  .date {
    font-size: 40px;
    letter-spacing: 1px;
  }
  .week {
    height: 80px;
    font-size: 53px;
  }
}

.inline{
  display: inline-block;
}
.weather{
  margin-top: -20px;
}
.wea-mini{
  margin-top: -10px;
}
.wea-left{
  margin-right: 25px;
}
.wea-icon{
  font-size: 112px;
}
.tem-wrap{
  margin-top: -15px;
}
.tem{
  font-size: 96px;
  margin-right: 5px;
}
.wea-right{
  font-size: 34px;
  text-align: left;
}
</style>